<template>
	<view class="container">
		<!-- iOS风格顶部导航 -->
		<view class="ios-top-nav">
			<view class="status-bar"></view>
			<view class="nav-content">
				<view class="nav-left" @tap="goBack">
					<image src="/static/icons/back.png" mode="aspectFit"></image>
				</view>
				<text class="nav-title">学生画像分析</text>
				<view class="nav-right">
					<view class="action-btn">
						<image src="/static/icons/search.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 学生基本信息 -->
			<view class="user-profile">
				<view class="user-header">
					<image src="/static/user-avatar.png" mode="aspectFill" class="avatar"></image>
					<view class="user-info">
						<text class="name">张明</text>
						<view class="user-meta">
							<text class="id">学号: 202201034</text>
							<text class="grade">高二年级</text>
						</view>
					</view>
				</view>
				<view class="profile-stats">
					<view class="stat-item">
						<text class="stat-value">92</text>
						<text class="stat-label">综合评分</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">86h</text>
						<text class="stat-label">学习时长</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">15</text>
						<text class="stat-label">已学课程</text>
					</view>
				</view>
			</view>
			
			<!-- 学习能力雷达图 -->
			<view class="analytics-card">
				<view class="card-header">
					<text class="card-title">学习能力分析</text>
					<text class="card-subtitle">基于近3个月学习数据</text>
				</view>
				<view class="radar-chart">
					<!-- 这里使用图片模拟雷达图，实际项目中可引入图表库 -->
					<image src="/static/analytics/radar-chart.png" mode="aspectFit"></image>
				</view>
				<view class="ability-list">
					<view class="ability-item">
						<view class="ability-name">
							<view class="ability-dot" style="background-color: #007AFF;"></view>
							<text>专注力</text>
						</view>
						<view class="ability-bar">
							<view class="ability-progress" style="width: 85%; background-color: #007AFF;"></view>
						</view>
						<text class="ability-score">8.5</text>
					</view>
					<view class="ability-item">
						<view class="ability-name">
							<view class="ability-dot" style="background-color: #5AC8FA;"></view>
							<text>记忆力</text>
						</view>
						<view class="ability-bar">
							<view class="ability-progress" style="width: 78%; background-color: #5AC8FA;"></view>
						</view>
						<text class="ability-score">7.8</text>
					</view>
					<view class="ability-item">
						<view class="ability-name">
							<view class="ability-dot" style="background-color: #34C759;"></view>
							<text>理解力</text>
						</view>
						<view class="ability-bar">
							<view class="ability-progress" style="width: 92%; background-color: #34C759;"></view>
						</view>
						<text class="ability-score">9.2</text>
					</view>
					<view class="ability-item">
						<view class="ability-name">
							<view class="ability-dot" style="background-color: #FF9500;"></view>
							<text>创造力</text>
						</view>
						<view class="ability-bar">
							<view class="ability-progress" style="width: 67%; background-color: #FF9500;"></view>
						</view>
						<text class="ability-score">6.7</text>
					</view>
					<view class="ability-item">
						<view class="ability-name">
							<view class="ability-dot" style="background-color: #FF3B30;"></view>
							<text>执行力</text>
						</view>
						<view class="ability-bar">
							<view class="ability-progress" style="width: 88%; background-color: #FF3B30;"></view>
						</view>
						<text class="ability-score">8.8</text>
					</view>
				</view>
			</view>
			
			<!-- 学科分析 -->
			<view class="analytics-card">
				<view class="card-header">
					<text class="card-title">学科成绩分析</text>
					<text class="view-more">查看详情</text>
				</view>
				<view class="subjects-chart">
					<!-- 这里使用图片模拟柱状图，实际项目中可引入图表库 -->
					<image src="/static/analytics/subjects-chart.png" mode="aspectFit"></image>
				</view>
				<view class="subject-highlights">
					<view class="highlight-item strength">
						<text class="highlight-title">优势学科</text>
						<view class="highlight-content">
							<text>物理、英语</text>
						</view>
					</view>
					<view class="highlight-item weakness">
						<text class="highlight-title">待提升学科</text>
						<view class="highlight-content">
							<text>化学、语文</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 学习习惯分析 -->
			<view class="analytics-card">
				<view class="card-header">
					<text class="card-title">学习习惯分析</text>
					<text class="card-subtitle">基于近30天数据</text>
				</view>
				<view class="habit-stats">
					<view class="habit-item">
						<view class="habit-icon" style="background-color: rgba(0, 122, 255, 0.1);">
							<image src="/static/analytics/time-icon.png" mode="aspectFit"></image>
						</view>
						<view class="habit-info">
							<text class="habit-name">学习时段</text>
							<text class="habit-value">晚上8点-10点</text>
						</view>
					</view>
					<view class="habit-item">
						<view class="habit-icon" style="background-color: rgba(52, 199, 89, 0.1);">
							<image src="/static/analytics/frequency-icon.png" mode="aspectFit"></image>
						</view>
						<view class="habit-info">
							<text class="habit-name">学习频率</text>
							<text class="habit-value">每周5天</text>
						</view>
					</view>
					<view class="habit-item">
						<view class="habit-icon" style="background-color: rgba(255, 149, 0, 0.1);">
							<image src="/static/analytics/duration-icon.png" mode="aspectFit"></image>
						</view>
						<view class="habit-info">
							<text class="habit-name">平均时长</text>
							<text class="habit-value">1.5小时/天</text>
						</view>
					</view>
					<view class="habit-item">
						<view class="habit-icon" style="background-color: rgba(255, 59, 48, 0.1);">
							<image src="/static/analytics/efficiency-icon.png" mode="aspectFit"></image>
						</view>
						<view class="habit-info">
							<text class="habit-name">学习效率</text>
							<text class="habit-value">中上水平</text>
						</view>
					</view>
				</view>
				<view class="week-trend">
					<text class="trend-title">近7天学习热力图</text>
					<view class="heatmap">
						<view class="day-column" v-for="(day, index) in weekHeatmap" :key="index">
							<text class="day-name">{{day.name}}</text>
							<view class="heat-blocks">
								<view class="heat-block" 
									v-for="(block, blockIndex) in day.blocks" 
									:key="blockIndex"
									:style="{ backgroundColor: getHeatColor(block.value) }">
								</view>
							</view>
							<text class="day-hours">{{day.hours}}h</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 智能推荐 -->
			<view class="analytics-card">
				<view class="card-header">
					<text class="card-title">AI学习推荐</text>
					<text class="view-more">查看全部</text>
				</view>
				<view class="recommendation-list">
					<view class="recommendation-item">
						<view class="recommendation-icon" style="background-color: rgba(0, 122, 255, 0.1);">
							<image src="/static/analytics/course-icon.png" mode="aspectFit"></image>
						</view>
						<view class="recommendation-content">
							<text class="recommendation-title">推荐课程：高中化学实验精讲</text>
							<text class="recommendation-desc">基于你的化学学科薄弱点定制推荐</text>
						</view>
						<view class="arrow-icon">
							<image src="/static/icons/arrow-right.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="recommendation-item">
						<view class="recommendation-icon" style="background-color: rgba(52, 199, 89, 0.1);">
							<image src="/static/analytics/plan-icon.png" mode="aspectFit"></image>
						</view>
						<view class="recommendation-content">
							<text class="recommendation-title">创造力提升计划</text>
							<text class="recommendation-desc">针对性提升你的创新思维能力</text>
						</view>
						<view class="arrow-icon">
							<image src="/static/icons/arrow-right.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="recommendation-item">
						<view class="recommendation-icon" style="background-color: rgba(255, 149, 0, 0.1);">
							<image src="/static/analytics/habit-icon.png" mode="aspectFit"></image>
						</view>
						<view class="recommendation-content">
							<text class="recommendation-title">早起学习习惯培养</text>
							<text class="recommendation-desc">尝试调整你的学习时段以提高效率</text>
						</view>
						<view class="arrow-icon">
							<image src="/static/icons/arrow-right.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			weekHeatmap: [
				{ name: '一', hours: 1.5, blocks: [
					{ value: 0.2 }, { value: 0.5 }, { value: 0.8 }, { value: 0.3 }
				]},
				{ name: '二', hours: 2.0, blocks: [
					{ value: 0.6 }, { value: 0.7 }, { value: 0.9 }, { value: 0.4 }
				]},
				{ name: '三', hours: 0.5, blocks: [
					{ value: 0.1 }, { value: 0.2 }, { value: 0.1 }, { value: 0.1 }
				]},
				{ name: '四', hours: 3.0, blocks: [
					{ value: 0.8 }, { value: 0.9 }, { value: 0.7 }, { value: 0.6 }
				]},
				{ name: '五', hours: 2.5, blocks: [
					{ value: 0.6 }, { value: 0.8 }, { value: 0.7 }, { value: 0.4 }
				]},
				{ name: '六', hours: 1.0, blocks: [
					{ value: 0.3 }, { value: 0.4 }, { value: 0.2 }, { value: 0.1 }
				]},
				{ name: '日', hours: 0.5, blocks: [
					{ value: 0.1 }, { value: 0.2 }, { value: 0.1 }, { value: 0.1 }
				]}
			]
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		getHeatColor(value) {
			// 根据学习强度返回热力图颜色
			if (value < 0.2) return 'rgba(0, 122, 255, 0.1)';
			if (value < 0.4) return 'rgba(0, 122, 255, 0.3)';
			if (value < 0.6) return 'rgba(0, 122, 255, 0.5)';
			if (value < 0.8) return 'rgba(0, 122, 255, 0.7)';
			return 'rgba(0, 122, 255, 0.9)';
		}
	}
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}

/* iOS顶部导航栏 */
.ios-top-nav {
	background-color: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 0.5px solid rgba(60, 60, 67, 0.1);
	position: sticky;
	top: 0;
	z-index: 100;
	
	.status-bar {
		height: var(--status-bar-height, 20px);
	}
	
	.nav-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 16px;
		min-height: 44px;
	}
	
	.nav-title {
		font-size: 17px;
		font-weight: 600;
		color: #000;
	}
	
	.nav-left, .nav-right {
		display: flex;
		align-items: center;
		
		image {
			width: 22px;
			height: 22px;
		}
	}
	
	.action-btn {
		width: 32px;
		height: 32px;
		border-radius: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.03);
		
		&:active {
			background-color: rgba(0, 0, 0, 0.05);
		}
	}
}

/* 主内容区域 */
.main-content {
	flex: 1;
	position: relative;
	padding: 16px;
	box-sizing: border-box;
	width: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	height: calc(100vh - var(--status-bar-height, 20px) - 54px);
	scrollbar-width: thin; /* Firefox 细滚动条 */
	
	&::-webkit-scrollbar {
		width: 4px; /* Chrome、Safari 滚动条宽度 */
	}
	
	&::-webkit-scrollbar-thumb {
		background-color: rgba(0, 0, 0, 0.2); /* 滚动条颜色 */
		border-radius: 2px;
	}
	
	&::-webkit-scrollbar-track {
		background: transparent; /* 滚动条轨道透明 */
	}
}

/* 用户资料卡片 */
.user-profile {
	background: linear-gradient(135deg, #007AFF, #5AC8FA);
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 16px;
	box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
	box-sizing: border-box;
	width: 100%;
	
	.user-header {
		display: flex;
		align-items: center;
		margin-bottom: 16px;
		flex-wrap: wrap;
		
		.avatar {
			width: 60px;
			height: 60px;
			border-radius: 30px;
			border: 2px solid #fff;
			margin-right: 16px;
			flex-shrink: 0;
		}
		
		.user-info {
			flex: 1;
			min-width: 0;
			
			.name {
				font-size: 20px;
				font-weight: bold;
				color: #fff;
				margin-bottom: 4px;
				display: block;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			
			.user-meta {
				display: flex;
				flex-wrap: wrap;
				
				.id, .grade {
					font-size: 12px;
					color: rgba(255, 255, 255, 0.8);
					background-color: rgba(255, 255, 255, 0.2);
					padding: 2px 8px;
					border-radius: 10px;
					margin-right: 8px;
					margin-bottom: 4px;
					white-space: nowrap;
				}
			}
		}
	}
	
	.profile-stats {
		display: flex;
		justify-content: space-between;
		
		.stat-item {
			text-align: center;
			
			.stat-value {
				font-size: 22px;
				font-weight: bold;
				color: #fff;
				display: block;
				margin-bottom: 4px;
			}
			
			.stat-label {
				font-size: 12px;
				color: rgba(255, 255, 255, 0.8);
			}
		}
	}
}

/* 分析卡片通用样式 */
.analytics-card {
	background: #fff;
	border-radius: 16px;
	padding: 16px;
	margin-bottom: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	width: 100%;
	
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
		
		.card-title {
			font-size: 17px;
			font-weight: 600;
			color: #000;
		}
		
		.card-subtitle {
			font-size: 12px;
			color: #8e8e93;
		}
		
		.view-more {
			font-size: 14px;
			color: #007AFF;
		}
	}
}

/* 雷达图区域 */
.radar-chart {
	display: flex;
	justify-content: center;
	margin: 10px 0 20px;
	width: 100%;
	overflow: hidden;
	
	image {
		width: 100%;
		height: 200px;
		object-fit: contain;
	}
}

/* 能力条样式 */
.ability-list {
	.ability-item {
		display: flex;
		align-items: center;
		margin-bottom: 12px;
		flex-wrap: wrap;
		
		.ability-name {
			width: 70px;
			display: flex;
			align-items: center;
			flex-shrink: 0;
			margin-right: 8px;
			
			.ability-dot {
				width: 8px;
				height: 8px;
				border-radius: 4px;
				margin-right: 6px;
				flex-shrink: 0;
			}
			
			text {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		
		.ability-bar {
			flex: 1;
			height: 6px;
			background-color: rgba(0, 0, 0, 0.05);
			border-radius: 3px;
			margin: 0 8px 0 0;
			overflow: hidden;
			min-width: 50px;
			
			.ability-progress {
				height: 100%;
				border-radius: 3px;
			}
		}
		
		.ability-score {
			width: 30px;
			font-weight: 500;
			text-align: right;
			flex-shrink: 0;
		}
	}
}

/* 学科图表区域 */
.subjects-chart {
	margin: 10px 0;
	width: 100%;
	overflow: hidden;
	
	image {
		width: 100%;
		height: 180px;
		object-fit: contain;
	}
}

/* 优势和弱势学科 */
.subject-highlights {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	
	.highlight-item {
		flex: 1;
		padding: 10px;
		border-radius: 10px;
		word-break: break-word;
		
		&.strength {
			background-color: rgba(52, 199, 89, 0.1);
			margin-right: 8px;
			
			.highlight-title {
				color: #34C759;
			}
		}
		
		&.weakness {
			background-color: rgba(255, 59, 48, 0.1);
			
			.highlight-title {
				color: #FF3B30;
			}
		}
		
		.highlight-title {
			font-size: 13px;
			font-weight: 500;
			margin-bottom: 6px;
			display: block;
		}
		
		.highlight-content {
			font-size: 15px;
			color: #333;
		}
	}
}

/* 学习习惯分析 */
.habit-stats {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 16px;
	width: 100%;
	box-sizing: border-box;
	
	.habit-item {
		width: 50%;
		display: flex;
		align-items: center;
		margin-bottom: 12px;
		padding-right: 8px;
		box-sizing: border-box;
		
		.habit-icon {
			width: 36px;
			height: 36px;
			border-radius: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 10px;
			
			image {
				width: 20px;
				height: 20px;
			}
		}
		
		.habit-info {
			flex: 1;
			
			.habit-name {
				font-size: 12px;
				color: #8e8e93;
				display: block;
				margin-bottom: 2px;
			}
			
			.habit-value {
				font-size: 14px;
				font-weight: 500;
				color: #000;
			}
		}
	}
}

/* 每周热力图 */
.week-trend {
	width: 100%;
	box-sizing: border-box;
	
	.trend-title {
		font-size: 14px;
		font-weight: 500;
		margin-bottom: 12px;
		display: block;
	}
	
	.heatmap {
		display: flex;
		justify-content: space-between;
		width: 100%;
		box-sizing: border-box;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 6px;
		scrollbar-width: none; /* Firefox 隐藏滚动条 */
		
		&::-webkit-scrollbar {
			display: none; /* Chrome、Safari 隐藏滚动条 */
		}
		
		.day-column {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex-shrink: 0;
			width: calc(100% / 7 - 4px);
			margin: 0 2px;
			
			.day-name {
				font-size: 12px;
				color: #8e8e93;
				margin-bottom: 6px;
			}
			
			.heat-blocks {
				display: flex;
				flex-direction: column;
				width: 100%;
				
				.heat-block {
					width: 100%;
					max-width: 30px;
					height: 10px;
					border-radius: 2px;
					margin-bottom: 2px;
					margin: 0 auto 2px;
				}
			}
			
			.day-hours {
				font-size: 12px;
				color: #333;
				margin-top: 6px;
			}
		}
	}
}

/* 智能推荐 */
.recommendation-list {
	width: 100%;
	box-sizing: border-box;
	
	.recommendation-item {
		display: flex;
		align-items: center;
		padding: 12px 0;
		border-bottom: 0.5px solid rgba(60, 60, 67, 0.1);
		
		&:last-child {
			border-bottom: none;
			padding-bottom: 0;
		}
		
		.recommendation-icon {
			width: 40px;
			height: 40px;
			border-radius: 12px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 12px;
			
			image {
				width: 22px;
				height: 22px;
			}
		}
		
		.recommendation-content {
			flex: 1;
			min-width: 0; /* 防止内容溢出 */
			
			.recommendation-title {
				font-size: 15px;
				font-weight: 500;
				color: #000;
				margin-bottom: 4px;
				display: block;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			
			.recommendation-desc {
				font-size: 13px;
				color: #8e8e93;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		
		.arrow-icon {
			width: 20px;
			height: 20px;
			opacity: 0.3;
		}
	}
}

/* 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
	.container {
		background-color: #1a1a1a;
	}
	
	.main-content {
		&::-webkit-scrollbar-thumb {
			background-color: rgba(255, 255, 255, 0.2); /* 暗黑模式下滚动条颜色 */
		}
	}
	
	.ios-top-nav {
		background-color: rgba(30, 30, 30, 0.8);
		border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
		
		.nav-title {
			color: #fff;
		}
		
		.action-btn {
			background-color: rgba(255, 255, 255, 0.1);
		}
	}
	
	.analytics-card {
		background-color: #2c2c2e;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		
		.card-title {
			color: #fff;
		}
		
		.ability-item .ability-bar {
			background-color: rgba(255, 255, 255, 0.1);
		}
		
		.ability-score {
			color: #fff;
		}
		
		.subject-highlights .highlight-content {
			color: #ddd;
		}
		
		.habit-info .habit-value {
			color: #fff;
		}
		
		.day-hours {
			color: #ddd;
		}
		
		.recommendation-item {
			border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
			
			.recommendation-title {
				color: #fff;
			}
		}
	}
}
</style> 